<template>
    <view class="content">
        <u-sticky offset-top="1">
            <u-tabs :lineWidth="25" :list="typelist" @click="selectType">
                <view slot="right" style="padding-left: 12px;margin-right:15px;">
                    <u-icon name="list" size="21" bold></u-icon>
                </view>
            </u-tabs>

        </u-sticky>


        <view class="search">
            <u-search class="left" placeholder="请输入关键词" @change="query" :bgColor="searchstyle" :borderColor="borderstyle"
                :showAction="false" v-model="keyword"></u-search>
            <view class="backtop">
                <u-button type="primary" @click="topback" class="custom-style" :plain="true" size="mini"
                    text="返回顶部"></u-button>

            </view>

        </view>


        <u-sticky offset-top="105">
            <view class="btngroup">
                <view class="datebtn">
                    <u-tag :text="'日期筛选'" @click="selectdate" plain="true" size="mini" type="info" />

                </view>
                <view class="storebtn">
                    <u-tag :text="'业绩筛选'" @click="yejishaixuan" plain="true" size="mini" type="primary" />

                </view>
            </view>

        </u-sticky>

        <!-- 业绩筛选 -->
        <u-picker :show="filtershow" ref="uPicker" :columns="columns" @confirm="confirmfilter" @cancel="cancelfilter"
            @change="changeHandler"></u-picker>


        <!-- 筛选日期 -->
        <u-calendar :mode="'range'" :monthNum="24" :minDate="startdate" :maxDate="enddate" :show="showdate"
            @close="closedate" @confirm="confirmdate" startText="选择开始" endText="选择结束" confirmDisabledText="请选择查询审批时间段"
            :formatter="formatter" />

        <view v-if="empty == 'isempty'" class="empty">
            <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">

            </u-empty>
        </view>
        <!-- <view class="charts-box">
                <qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" />
            </view> -->

        <view class="section">

            <u-list :scrollTop="120" height="560" :style="height" :enableBackToTop="true" v-if="empty == 'notempty'"
                :preLoadScreen="page * 5" @scrolltolower="scrolltolower" :pagingEnabled="true">

                <u-list-item v-for="item in prolist" :key=item.id>
                    <u-swipe-action>
                        <u-swipe-action-item @click="action" :name="item.id" :disabled="true" :options="options">
                            <view class="card">
                                <view class="left">

                                    <view class="text">
                                        <span class="label">客户名称:</span>
                                        <span>{{ item.busnickname_text }}</span>
                                    </view>

                                    <view class="text">
                                        <span class="label">订单类型:</span>
                                        <span>{{ item.type_text }}</span>

                                    </view>
                                    <view class="text">
                                        <span class="label">订单金额:</span>
                                        <span>{{ item.order.amount }}</span>

                                    </view>
                                    <view class="text">
                                        <span class="label">订单号:</span>
                                        <span>{{ item.order.code }}</span>

                                    </view>
                                    <view class="text">
                                        <span class="label">门店:</span>
                                        <span>{{ item.order.storename_text }}</span>

                                    </view>
                                    <view class="text">
                                        <span class="label">完成时间:</span>
                                        <span>{{ item.createtime_text }}</span>
                                    </view>


                                </view>
                                <view class="destroy">
                                    <u-button type="error" @click="destroybtn(item.id)" :plain="true"
                                        :customStyle="{ width: '50px', height: '25px' }" :hairline="true" text="销毁"
                                        :size="mini"></u-button>

                                </view>
                                <view class="info">
                                    <u-button type="info" @click="infobtn(item.id)" :plain="true"
                                        :customStyle="{ width: '50px', height: '25px' }" :hairline="true" text="详情"
                                        :size="mini"></u-button>

                                </view>
                                <view class="right">
                                    <view class="avatar">
                                        <u-image :lazy-load="true" :shape="'circle'" :src="item.admin.avatar_text"
                                            width="50px" height="50px"></u-image>
                                        <view class="text">
                                            <span>{{ item.admin.nickname }}</span>
                                        </view>
                                    </view>

                                    <view class="text">
                                        <span class="label">获提成:</span>
                                        <span>{{ item.commission }}</span>
                                    </view>



                                </view>
                            </view>

                        </u-swipe-action-item>


                    </u-swipe-action>

                </u-list-item>

                <u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
                    :nomore-text="nomoreText" />






            </u-list>
        </view>

        <!-- 消息提醒 -->
        <u-toast ref="notice"></u-toast>

        <!-- 模态框 -->
        <u-modal :show="show" :content="content" showCancelButton @confirm="confirm" @cancel="cancel" />


    </view>
</template>

<script>
export default {
    onLoad(e) {
        const currentDate = new Date();
        this.date = currentDate.getFullYear();

        this.empid = e.empid



        this.startdate = this.date + "-" + "01" + "-" + "1"
        // 明年时间段
        this.enddate = this.date + "-" + "12" + "-" + "31"

        this.auth = this.$u.auth.check()

        this.list()
        this.gettype()
        this.count()
        this.getstoreadminlist();





    },
    created() {

         setInterval(() => {

            this.$u.count.check()

        }, 15000);

    },
    data() {
        return {
            filtershow: false,
            status: 'loading',
            loadingText: '努力加载中',
            loadmoreText: '下拉加载更多',
            nomoreText: '没有更多数据了',
            padding: '150rpx 0rpx',
            empid: 0,
            startdate: "",
            enddate: "",
            storeName: "",
            nickname: "",
            stoid: "",
            date: "",
            showdate: false,
            type: "",
            options: [

                {
                    text: "添加",
                    style: {
                        backgroundColor: "#3c9cff",
                    },
                },
                {
                    text: "销毁",
                    style: {
                        backgroundColor: "#f56c6c",
                    },
                },
            ],
            content: "是否销毁该数据",

            auth: {},
            page: 1,
            columns: [

            ],
            columnData:[],
         
            xzstoid: 0,
            empty: "",
            keyword: '',
            searchstyle: "#ffffff",
            borderstyle: "#eee",
            prolist: [],
            show: false,
            typelist: [],
            countlist: [],
            xzdate: "",
            chartData: [],
          
        }
    },
    methods: {

        async getstoreadminlist() {
            let result = await this.$u.api.admin.getyejishaixuan({ adminid: this.auth.id,stoid:this.auth.stoid})
            this.columns = result.data.columns
            this.columnData = result.data.typelist

        },
        async confirmdate(e) {
            // 筛选第一个跟最后一个日期
            this.xzdate = `${e[0]} / ${e[e.length - 1]}`
            this.yejifilter()

            uni.showLoading({
                title: '加载中'
            });

            this.showdate = false





        },
        closedate() {
            this.showdate = false
        },
        selectdate(e) {


            this.showdate = true
        },

        changeHandler(e) {
            const {
                columnIndex,
                value,
                values, // values为当前变化列的数组内容
                index,
                // 微信小程序无法将picker实例传出来，只能通过ref操作
                picker = this.$refs.uPicker
            } = e
            // 当第一列值发生变化时，变化第二列(后一列)对应的选项
            if (columnIndex === 0) {
                // picker为选择器this实例，变化第二列对应的选项
                picker.setColumnValues(1, this.columnData[index])
            }
        },
        // 回调参数为包含columnIndex、value、values
        confirm(e) {
            this.show = false
        },


        async count() {
            let data = {
                adminid: this.auth.id,
                stoid: this.auth.stoid,
                date: this.date,
                empid: this.empid

            }
            let result = await this.$u.api.admin.ordercount(data)

            if (result.code) {
                this.chartData = result.data
            }

        },

        async selectType(e) {
            this.page = 1
            this.type = e.type
            this.xzstoid = e.xzstoid
            // 最高管理员需传输的数据
            let data = {
                stoid: this.auth.stoid,
                xzstoid: this.xzstoid,
                page: this.page,
                empid: this.empid,
                date: this.date,
                type: this.type,
                adminid: this.auth.id,
                storeName: this.storeName,
                nickname: this.nickname,
                keyword: this.keyword,
            }

            let result = await this.$u.api.admin.action(data);

            if (result.code) {


                if (Array.isArray(result.data) && result.data.length > 0) {
                    this.empty = "notempty"

                    this.prolist = []
                    this.prolist = this.prolist.concat(result.data)

                    this.page++




                } else {
                    this.empty = "isempty"


                }
            }

        },

        action(item) {
            // 添加
            if (item.index == 0) {
                uni.$u.route({
                    url: "/pagesC/product/brank/add",
                })
            }
            // 销毁
            if (item.index == 1) {
                this.show = true
                this.brand_id = item.name
            }

        },
        cancel() {
            this.show = false
        },
        closedate() {
            this.showdate = false
        },
        query(e) {
            this.page = 1

            // 直接赋值
            this.keyword = e
            // 然后调用
            this.list()

        },
        yejishaixuan() {
            this.filtershow = true
        },
        confirmfilter(e) {

            this.storeName = e.value[0]
            this.nickname = e.value[1]

            this.yejifilter()

            this.filtershow = false
        },
        async yejifilter() {
            let data = {
                adminid: this.auth.id,
                storeName: this.storeName,
                nickname: this.nickname,
                date: this.date,
                xzdate: this.xzdate
            }
            let result = await this.$u.api.admin.yejidatafilter(data)

            if (result.data.length > 0) {

                this.empty = "notempty"
                this.prolist = []
                this.prolist = result.data
                setTimeout(function () {
                    uni.hideLoading();
                }, 1200);

            } else {
                setTimeout(function () {
                    uni.hideLoading();
                }, 1200);
                this.empty = "isempty"
            }



        },
        cancelfilter(e) {
            this.filtershow = false
        },

        async list() {
            // 最高管理员需传输的数据
            let data = {
                stoid: this.auth.stoid,
                page: this.page,
                empid: this.empid,
                date: this.date,
                type: this.type,
                adminid: this.auth.id,
                keyword: this.keyword,

            }
            // console.log(data)
            let result = await this.$u.api.admin.yejilists(data);

            if (result.code) {


                if (Array.isArray(result.data) && result.data.length > 0) {
                    this.empty = "notempty"

                    this.prolist = this.prolist.concat(result.data)

                    this.page++




                } else {
                    this.status = "nomore"


                }

            }


        },

        // 去详情页面
        infobtn(e) {
            this.$u.route(
                `/pagesA/admin/info`, {
                pefid: e,

            })
        },
        scrolltolower() {



            this.list()


        },
        async topback() {
            this.page = 1
            this.list()

        },
        destroybtn(e) {
            this.show = true
        },
        async gettype() {
            let data = {
                adminid: this.auth.id,
                empid: this.empid,
                date: this.date,
                type: this.type,
                stoid: this.auth.stoid

            }

            let result = await this.$u.api.admin.typelistyear(data)

            if (result.code) {
                this.typelist = result.data
            }
        },



    }
}
</script>

<style scoped  lang="scss" >
.content {
    width: 100%;
    position: relative;
}

.section {
    height: 560px;
    position: fixed;
    width: 100%;
    top: 160px;
    left: 0px;

    overflow-y: hidden;
}

.backtop {
    width: 20px;
    color: "blue";
    margin-left: 15px;
}

.empty {
    margin-top: 180px;
}

.search {
    width: 80%;
    position: fixed;
    top: 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 7%;
    z-index: 999;

}


.card {
    display: flex;
    width: 92%;
    height: 150px;
    margin: 0 auto;
    border-radius: 2%;
    padding-top: 10px;
    padding-bottom:20px;
    position: relative;
    border: 1px solid #eee;
    margin-top: 15px;
    box-shadow: 2px 2px 2px #eee, 2px 2px 2px #eee;



    .left {
        width: 160px !important;

        .text {
            width: 230px;
            padding: 2px 15px;

            h4 {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
            }

            span {
                font-size: 12px;
                padding-left: 10px;
                color: #888;
            }

            .label {
                color: #888;



            }


        }
    }

    .right {
        margin-left: 80px;

        .avatar {
            padding: 10px 20px;
            text-align: center;
        }

        .text {

            padding: 3px;

            h4 {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
            }

            span {
                font-size: 12px;
                color: #888;
                font-weight: bold;

            }

            span:nth-of-type(2) {
                padding-left: 10px;
            }
        }
    }
}

.content {
    background: #ffffff;
}

.datebtn {
    width: 60px;
}

.storebtn {
    width: 60px;
}

.destroy {
    height: 35px;
    padding-top: 40px;
    position: absolute;
    left: 135px;
    top: 10px;
}

.btngroup {
    width: 100%;
    display: flex;
    margin-top: 70px;
    justify-content: space-around;
}

.info {
    height: 35px;
    padding-top: 40px;
    position: absolute;
    left: 195px;
    top: 10px;
}

.charts-box {
    width: 100%;
    height: 230px;
    position: fixed;
    top: 90px;
    left: 0px;
    z-index: 9999;
}
</style>